<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{https://cdn.highcharts.com.cn/highcharts/highcharts.js}"></script>
    <script th:src="@{https://cdn.highcharts.com.cn/highcharts/modules/exporting.js}"></script>
    <script th:src="@{https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js}"></script>
    <link rel="stylesheet" th:href="@{//unpkg.com/layui@2.6.8/dist/css/layui.css}">
    <script type="text/javascript" th:src="@{//unpkg.com/layui@2.6.8/dist/layui.js}"></script>
    <script th:src="@{http://code.jquery.com/jquery-1.4.1.min.js}"></script>
</head>

<body class="layui-layout-body">
<!--头-->
<!--在html的head元素中通过th:replace属性引入，值为模板的路径，
不需要模板的后缀后面::跟的是模板的ID(即公共header页面中th:fragment定义的值)-->
<div th:replace="head :: header"></div>

<!--主体内容部分-->
<div class="layui-body" style="margin:70px 0px 0px 20px;">

    <div id="container" style="max-width:1300px;height:400px"></div>

</div>

<!--底部内容部分-->
<div th:replace="footer :: footer"></div>

<script type="text/javascript">

    $(function () {
        $.ajax({
            "url": "/push-message-info/commute",
            "type": "GET",
            "success": function (data) {

                var chart = Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '实验小学班级通勤率统计'
                    },
                    subtitle: {
                        text: '技术人员: 茶凡_Matrix'

                    },
                    xAxis: {
                        categories: [
                            '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
                        ],
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '通勤率(次)'
                        }
                    },
                    tooltip: {
                        // head + 每个 point + footer 拼接成完整的 table
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f} 次</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true //设置显示对应y的值
                            }

                        }
                    },
                    series: data
                });

                chart && myChart.setOption(chart);
            }
        });

    })


</script>

</body>

<style>
    .layui-layout-body {
        overflow-y: auto;
    }

    .layui-layout-body {
        overflow-x: auto;
    }
</style>

</html>